<template>
	<view>
		<view class="detail_nav pore" style="z-index: 999;">
			<u-navbar title="作品详情" bgColor="transparent" :titleStyle="{'color':'transparent'}">
				<view class="flex" slot="left">
					<view class="nav-left flex">
						<u-icon name="arrow-left" size="24" @click="back"></u-icon>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
						<u-icon name="home" size="24" @click="toHome"></u-icon>
					</view>
				</view>
				<view class="flex" slot="right" :style="{'marginRight':menuWidth + 'px'}">
					<view class="nav-left flex">
						<view class="wx">
							<button open-type="share">
								<u-icon name="share-square" size="24" color="#34314F"></u-icon>
							</button>
						</view>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px"
							v-if="detail.vlogStatus == 1"></u-line>
						<view @click="starlikeBtn(2,3,id)" v-if="detail.vlogStatus == 1">
							<u-icon :name="detail.isLike == 1?'heart-fill':'heart'" size="24"
								:color="detail.isLike == 1?'#FF5372':'#34314F'"></u-icon>
						</view>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="uni-margin-wrap" v-if="detail.resType == 1">
			<view v-if="detail.imgs.length > 0" class="pore">
				<swiper class="swiper" :current="banIndex" @change="changeSwiper"
					:style="{ height: swiperHeight + 'px' }" circular indicator-dots autoplay :interval="3000"
					indicator-active-color="#FFDE6D">
					<swiper-item v-for="(item,index) in detail.imgs" :key="index" class="flex-au"
						@click="$utils.previewImages(index,detail.imgs)">
						<image :src="api_host + item" mode="widthFix" class="width100"></image>
					</swiper-item>
				</swiper>
				<view class="ban-count cfff f26">
					{{banIndex + 1}} / {{detail.imgs.length}}
				</view>
			</view>
		</view>
		<view class="uni-margin-wrap" v-if="detail.resType == 2">
			<video :src="api_host + detail.imgs[0]" object-fit="cover" class="width100" style="height: 600rpx;"></video>
		</view>
		<u-gap height="30"></u-gap>
		<view class="ml30 mr30" v-if="detail">
			<view class="pj-item bgFff radius30 p20">
				<view class="flex" v-if="detail.relatedColumn == 3">
					<u-image :src="api_host + detail.encounterUser.userAvatar" mode="" width="40px" height="40px"
						shape="circle"></u-image>
					<view class="ml10">
						<view class="c343 f28">{{detail.encounterUser.nickName}}</view>
						<view class="c999 f24 mt10">{{detail.user.useTime}}</view>
					</view>
				</view>
				<view class="flex" v-else>
					<u-image :src="api_host + detail.user.userAvatar" mode="" width="40px" height="40px"
						shape="circle"></u-image>
					<view class="ml10">
						<view class="c343 f28">{{detail.user.userName}}</view>
						<view class="c999 f24 mt10">{{detail.user.useTime}}</view>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex">
					<view class="mr20">
						<u-icon name="eye-fill" size="16" color="#34314F" :label="detail.viewVolume" labelPos="right"
							labelSize="12"></u-icon>
					</view>
					<view class="mr20">
						<u-icon name="thumb-up-fill" size="16" color="#34314F" :label="detail.likeVolume"
							labelPos="right" labelSize="12"></u-icon>
					</view>
					<view>
						<u-icon name="chat-fill" size="16" color="#34314F" :label="detail.observeNumber"
							labelPos="right" labelSize="12"></u-icon>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="f28 c343 bold">
					{{detail.title}}
				</view>
				<u-gap height="10"></u-gap>
				<view class="f26 c343" style="line-height: 50rpx;">
					<!-- {{detail.sceneDesc}} -->
					<rich-text :nodes="detail.sceneDesc"></rich-text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex-jus">
					<view class="">
						<view class="f24 c999">发布时间：{{detail.createTime}}</view>
						<view class="f24 c999 mt10">地址：{{detail.addr}}</view>
					</view>
					<view @click="show_more = true" v-if="detail.userId == userInfo.id">
						<u-icon name="grid" size="30" color="#34314F"></u-icon>
					</view>
				</view>
				<!-- <view class="flex mt20" v-if="detail.relatedColumn == 1"
					@click="nologinJump('/foodpages/food/detail?id=' + detail.storeInfo.id)">
					<u-image :src="api_host + detail.storeInfo.icon" mode="" radius="5" width="50px"
						height="50px"></u-image>
					<view class="ml10">
						<view class="bold f28">{{detail.storeInfo.title}}</view>
						<view class="f24 c999 mt10">{{detail.storeInfo.badge}}</view>
					</view>
				</view> -->
			</view>
			<u-gap height="20"></u-gap>
			<!-- <u-button type="primary" @click="togroupdetail">团购商品</u-button> -->
			<view class="tuangou" @click="togroupdetail" v-if="goodsInfo!=null">
				<image :src="api_host+goodsInfo.icon" style="width: 227rpx;height: 227rpx;border-radius: 15rpx;">
				</image>
				<image src="../static/caractere/qwbj.png"
					style="width: 120rpx;height: 40rpx;position: absolute;top: 30rpx;left: 30rpx;"></image>
				<view class="flex1">
					<view class="textoverflow" style="width: 300rpx;">
						<text class="f32 fw500 ml20">{{goodsInfo.brand}} | {{goodsInfo.goodName}}
						</text>
					</view>
					<!-- <view class="f24 mt30 ml20 c999">{{goodsInfo.distance}}km</view> -->
					<view class="f24 ml20 mt10 flex flex-wrap">
						<view class="mr10 mb10" v-for="(item2,index2) in goodsInfo.tags" :key="index2">
							<u-tag shape="circle" size="mini" color="#34314F" bgColor="#f7f7f7" :text="item2"
								borderColor="#f7f7f7"></u-tag>
						</view>
					</view>
					<view class="box_bot flex-jus ml20">
						<view class="ml20">
							<view>
								<span class="cff7 f28">￥</span>
								<span class="cff7 f36 fw500">{{goodsInfo.salePrice}}</span>
								<span style="text-decoration: line-through"
									class="f24 ml10 c999">￥{{goodsInfo.originalPrice}}</span>
							</view>
							<view class="f24 flex cff7">
								<image src="../static/caractere/lisheng.png" style="width: 24rpx;height: 24rpx;">
								</image>
								<text>立省￥{{(goodsInfo.originalPrice - goodsInfo.salePrice) | toFixed2}}</text>
								<text class="ml10">已售{{goodsInfo.saleVolume}}</text>
							</view>
						</view>
						<view class="box_bot_right flex-cen">
							<image src="../static/caractere/box_bg.png"
								style="width: 130rpx;height: 110rpx;position: absolute;right: 0;"></image>
							<image src="../static/caractere/qiang.png" class="mr10"
								style="width: 42rpx;height: 50rpx;z-index: 99;">
							</image>
							<image class="mr10" src="../static/caractere/right.png" mode="widthFix"
								style="width: 28rpx;z-index: 99;">
							</image>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="flex-jus">
				<text class="c343 bold f28">评论 ({{detail.observeNumber}})</text>
				<!-- <view>
					<u-button color="#FEE9D6" :customStyle="{'color':'#FF7F1C','padding':'0 30rpx','height':'60rpx'}"
						shape="circle">
						服务成果
					</u-button>
				</view> -->
			</view>
			<u-gap height="20"></u-gap>
			<view class="">
				<view class="flex flex-start mb30" v-for="(item,index) in commnetList" :key="index">
					<u-image v-if="detail.relatedColumn == 3" :src="api_host + item.encounterUser.userAvatar" mode=""
						width="40px" height="40px" shape="circle"></u-image>
					<u-image v-else :src="api_host + item.user.userAvatar" mode="" width="40px" height="40px"
						shape="circle"></u-image>
					<view class="ml20 mt10 flex1" style="width: 80%;">
						<view class="c666 f26">
							{{detail.relatedColumn == 3?item.encounterUser.nickName:item.user.userName}}</view>
						<view class="c343 f26 mt20" v-if="item.content">{{item.content}}</view>
						<u-gap height="10"></u-gap>
						<view class="pore flex flex-wrap" v-if="item.images">
							<view class="mb10 mr10" v-for="(img,imgIndex) in item.imgsArr" :key="imgIndex">
								<u-image :src="api_host + img" mode=""
									@click="$utils.previewImages(imgIndex,item.imgsArr)" width="180rpx" height="180rpx"
									radius="5">
								</u-image>
							</view>
						</view>
						<view class="mt10 flex-jus flex-start">
							<view class="flex">
								<text class="c666 f24 flex1">{{item.createTime}}<!-- - {{item.addr}} --></text>
								<view class="ml20" v-if="item.userId == userInfo.id">
									<u-icon name="trash-fill" color="#666" @click="delCommentbtn(index,'',1)"></u-icon>
								</view>
							</view>
							<view class="flex ml20">
								<text class="c343 f26 mr20" @click="reply(item,1,null)">回复</text>
								<u-icon name="heart-fill" :color="item.isLike == 1?'#FF7F1C':'#999'"
									:label="item.likeVolume" :labelPos="item.isLike == 1?'#FF7F1C':'#999'"
									labelPos="right" labelSize="12" @click="commnetStar(item)"></u-icon>
							</view>
						</view>
						<view class="" v-show="item.open_children">
							<u-gap height="20"></u-gap>
							<!-- 二级评价 -->
							<view class="flex flex-start mb30 width100" v-for="(citem,cindex) in item.children"
								:key="cindex">
								<u-image v-if="detail.relatedColumn == 3"
									:src="api_host + citem.encounterUser.userAvatar" mode="" width="40px" height="40px"
									shape="circle"></u-image>
								<u-image v-else :src="api_host + citem.user.userAvatar" mode="" width="40px"
									height="40px" shape="circle"></u-image>
								<view class="ml20 mt10 flex1" style="width: 80%;">
									<view class="c666 f26 textoverflow width100"
										v-if="citem.replyEncounterUser && detail.relatedColumn == 3">
										<text>{{citem.encounterUser.nickName}} 回复 {{citem.replyEncounterUser.nickName}}</text>
									</view>
									<view class="c666 f26 textoverflow width100" v-if="citem.replyUser && detail.relatedColumn != 3">
										<text>{{citem.user.userName}} 回复 {{citem.replyUser.userName}}</text>
									</view>
									<view class="c666 f26 textoverflow width100" v-else>
										<text>{{detail.relatedColumn == 3?citem.encounterUser.nickName:citem.user.userName}}</text>
									</view>
									<view class="c343 f26 mt20" v-if="citem.content">{{citem.content}}</view>
									<u-gap height="10"></u-gap>
									<view class="pore flex flex-wrap" v-if="citem.images">
										<view class="mb10 mr10" v-for="(img,imgIndex) in citem.images.split(',')"
											:key="imgIndex">
											<u-image :src="api_host + img" mode=""
												@click="$utils.previewImages(imgIndex,citem.images.split(','))"
												width="150rpx" height="150rpx" radius="5">
											</u-image>
										</view>
									</view>
									<view class="mt10 flex-jus width100 flex-start">
										<view class="flex">
											<text
												class="c666 f24 flex1">{{citem.createTime}}<!-- - {{citem.addr}} --></text>
											<view class="ml20" v-if="citem.userId == userInfo.id">
												<u-icon name="trash-fill" color="#666"
													@click="delCommentbtn(index,cindex,2)"></u-icon>
											</view>
										</view>
										<view class="flex ml20">
											<text class="c343 f26 mr20" @click="reply(citem,2,item,index)">回复</text>
											<u-icon name="heart-fill" :color="citem.isLike == 1?'#FF7F1C':'#999'"
												:label="citem.likeVolume" :labelPos="citem.isLike == 1?'#FF7F1C':'#999'"
												labelPos="right" labelSize="12" @click="commnetStar(citem)"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="flex c666 mt20" v-if="item.children.length > 0" @click="openComment(item)">
							<view class="" style="margin-top: 4rpx;">
								<u-line color="#DDD3CE" length="27"></u-line>
							</view>
							<text class="f24 ml10 mr10" v-if="item.open_children">收起</text>
							<text class="f24 ml10 mr10" v-else>展开{{item.children.length}}条回复</text>
							<u-icon :name="item.open_children?'arrow-up':'arrow-down'" size="14"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="100"></u-gap>
		<view class="fix-bot bgFff" v-if="detail.vlogStatus == 1" :style="{'bottom':fixBottom + 'px'}">
			<u-gap height="10"></u-gap>
			<view class="fix-bot-box ml10 mr10">
				<view class="" v-if="showInput" @click="showInputbtn">
					<view class="comment bgF7 radius50 p10">
						<u-textarea v-model="keyword" :focus="focus" @blur="inputBlur" @focus="inputFocus"
							:adjustPosition="false"
							:placeholder="reply_info.id?('回复'+reply_info.user.userName) : '良言一句三冬暖，恶语伤人六月寒'" height="20"
							fixed border="none" autoHeight></u-textarea>
						<view class="pore flex flex-wrap mt10" v-if="imgList.length > 0">
							<view class="img-item pore mr10 mb10" v-for="(item,index) in imgList" :key="index">
								<image :src="api_host + item" mode="" style="width: 100rpx;height: 100rpx;"
									class="radiusBox">
								</image>
								<view class="img-del" @click.stop="delImg(index)">
									<u-icon name="close-circle-fill" size="16" color="#FF7F1C"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<u-gap height="10"></u-gap>
					<!-- <view class="flex-jus" @click="chooseAddress">
						<view class="left-label">
							<image src="../../static/images/you/address.png" mode=""
								style="width: 48rpx;height: 48rpx;">
							</image>
						</view>
						<view class="flex ml30">
							<text class="f26 mr20" :class="addr?'c343':'c999'">{{addr || '添加地点'}}</text>
							<u-icon name="arrow-right" color="#34314F"></u-icon>
						</view>
					</view>
					<u-gap height="5"></u-gap> -->
					<view class="flex-jus ml20 mr20">
						<view @click.stop="chooseImg">
							<u-icon name="photo" size="30" color="#34314F"></u-icon>
						</view>
						<view class="">
							<u-button color="#21B9AD" :disabled="!keyword && imgList.length == 0"
								:customStyle="{'color':'#fff','height':'60rpx'}" shape="circle"
								@click="addCommentbtn">发送</u-button>
						</view>
					</view>
				</view>
				<view class="flex-jus" v-else>
					<view class="bgF7 flex radius30 p20 flex1" @click="showInputbtn">
						<u-icon name="edit-pen" color="#999" size="20"></u-icon>
						<text class="ml10 f26 c999">分享一些想法...</text>
					</view>
					<view class="flex-jus flex1 ml30">
						<view class="mr20" @click="starlikeBtn(2,3,id)">
							<u-icon :name="detail.isLike == 1?'heart-fill':'heart'" size="24"
								:color="detail.isLike == 1?'#FF5372':'#34314F'" :label="detail.likeVolume || 0"
								labelPos="right" labelSize="12" labelColor="#34314F"></u-icon>
						</view>
						<view class="mr20" @click="starlikeBtn(1,3,id)">
							<u-icon :name="detail.isCollection == 1?'star-fill':'star'" size="24"
								:color="detail.isCollection == 1?'#FFBB58':'#34314F'" :label="detail.collectionVolume"
								labelPos="right" labelSize="12" labelColor="#34314F"></u-icon>
						</view>
						<view class="mr20" @click="showInputbtn">
							<u-icon name="chat" size="24" color="#34314F" :label="detail.observeNumber" labelPos="right"
								labelSize="12" labelColor="#34314F"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		<view class="fix-bot" v-if="detail.vlogStatus == 2">
			<view class="fix-bot-box ml10 mr10">
				<u-button color="#FF7F1C" :customStyle="{'color':'#FEE9D6'}" shape="circle" @click="releaseVlogbtn">
					发布
				</u-button>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		<u-modal :show="show_action" title="确认删除？">
			<view class="flex-jus" slot="confirmButton">
				<view class="flex1">
					<view class="mr20">
						<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
							@click="show_action = false">取消</u-button>
					</view>
				</view>
				<view class="flex1">
					<view class="ml20">
						<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
							@click="delVlogbtn">确认</u-button>
					</view>
				</view>
			</view>
		</u-modal>
		<!-- //更多 -->
		<u-popup :show="show_more" @close="show_more = false" @open="show_more = true" round="20">
			<view class="p30">
				<view>
					<u-button color="#FEE9D6" :customStyle="{'color':'#FF7F1C'}" shape="circle" @click="delData">
						删除
					</u-button>
				</view>
				<view class="mt20">
					<u-button color="#F7F7F7" :customStyle="{'color':'#34314F'}" shape="circle"
						@click="show_more = false">
						取消
					</u-button>
				</view>
			</view>
		</u-popup>
		<u-modal :show="show_action1" title="提示" content="确认删除评论？">
			<view class="" slot="confirmButton">
				<view class="flex-jus">
					<view class="flex1">
						<view class="mr20">
							<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="show_action1 = false">取消</u-button>
						</view>
					</view>
					<view class="flex1">
						<view class="ml20">
							<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
								@click="delComment">删除</u-button>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<u-overlay :show="showInput" @click="showInput = false,hideInput()" zIndex="100"></u-overlay>
		<view class="back-top pore">
			<u-back-top :scroll-top="scrollTop" bottom="200" :customStyle="{'backgroundColor':'#FFDE6D'}"
				:iconStyle="{'color':'#000','fontSize':'40rpx','fontWeight':'bold'}"></u-back-top>
		</view>
	</view>
</template>

<script>
	import {
		getVlogdetail,
		delVlog,
		releaseVlog,
		getComment,
		addComment,
		commentLike,
		commentDel
	} from '@/common/api_wan.js'
	import banSwiper from '@/components/banSwiper/index.vue'
	export default {
		name: '',
		components: {
			banSwiper
		},
		data() {
			return {
				scrollTop: 0,
				swiperHeight: 300,
				banIndex: 0,
				id: '',
				detail: null,
				collection: false,
				like: false,
				showInput: false,
				focus: false,
				keyword: '',
				addr: '',
				imgList: [],
				show_more: false,
				show_action: false,
				reply_info: {},
				commnetList: [],
				page: 1,
				lastPage: false,
				fixBottom: 0,
				show_action1: false,
				del_data: {},
				goodsInfo: null
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getVlogdetail()
			this.getComment()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			return {
				title: '东楚畅通',
				path: '/subpage/travel/workDetail?id=' + this.detail.id,
				imageUrl: this.api_host + this.detail.coverIcon,
				desc: this.detail.title,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onReachBottom() {
			if (!this.lastPage) {
				this.page = this.page + 1
				this.getComment()
			}
		},
		filters: {
			toFixed2(val) {
				return Number(val).toFixed(2)
			}
		},
		methods: {
			togroupdetail() {
				uni.navigateTo({
					url: '/groupPurchase/detail/index?id=' + this.goodsInfo.id
				})
			},
			back() {
				uni.navigateBack()
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			chooseAddress() {
				const that = this
				uni.chooseLocation({
					success(res) {
						that.addr = res.name
					}
				})
			},
			inputFocus(e) {
				this.fixBottom = e.detail.height
				console.log(e);
			},
			inputBlur(e) {
				this.fixBottom = 0
			},
			openComment(item) {
				item.open_children = !item.open_children
			},
			async getVlogdetail() { //详情
				uni.showLoading({
					mask: true
				})
				const res = await getVlogdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					this.goodsInfo = res.data.goodsInfo
					const {
						resContent
					} = this.detail
					this.detail.imgs = resContent.split(',')
					if (res.data.goodsInfo && res.data.goodsInfo.goodEmployValues) {
						this.goodsInfo.tags = res.data.goodsInfo.goodEmployValues.split(',')
					}
					this.getSysinfo()
				}
				uni.hideLoading()
			},
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.banIndex = e.detail.current;
			},
			getSysinfo() {
				let sysInfo = uni.getSystemInfoSync()
				this.swiperHeight = sysInfo.screenHeight * 0.6
			},
			async getComment() { //评论列表
				console.log(789789);
				uni.showLoading({
					mask: true
				})
				const res = await getComment({
					id: this.id,
					pageNum: this.page,
					pageSize: 10
				})
				if (res.code == 200) {
					const {
						lastPage,
						list
					} = res.data
					let data = list.map(item => {
						return {
							...item,
							open_children: false,
							imgsArr: item.images ? item.images.split(',') : []
						}
					})
					//this.total = res.total
					this.lastPage = lastPage
					this.commnetList = this.commnetList.concat(data)
				}
				uni.hideLoading()
			},

			showKeyboard() {
				uni.showKeyboard();
			},
			hideInput() {
				this.fixBottom = 0
				this.imgList = []
				this.addr = ''
				this.keyword = ''
				this.reply_info = {}
				this.showInput = false
				this.focus = false
			},
			showInputbtn() {
				this.showInput = true
				this.focus = true
			},
			reply(item, level, pitem, pindex) {
				this.showInput = true
				this.reply_info = item
				this.reply_info.level = level
				if (level == 2) {
					this.reply_info.pindex = pindex
					this.reply_info.p_info = JSON.parse(JSON.stringify(pitem))
				}
				this.focus = true
				console.log(this.reply_info);
			},
			chooseImg() {
				const that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						res.tempFilePaths.forEach(async file => {
							const res1 = await that.$utils.uploadFile(file)
							if (res1.code == 200) {
								that.imgList.push(res1.full_url)
							}
						})
					}
				});
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			delData() {
				this.show_more = false
				this.show_action = true
			},
			async delVlogbtn() {
				uni.showLoading({
					mask: true
				})
				const res = await delVlog({
					id: this.id
				})
				if (res.code == 200) {
					uni.navigateBack()
				}
				uni.hideLoading()
			},
			releaseVlogbtn() {
				const that = this
				uni.showModal({
					title: '确定发布吗？',
					confirmText: '发布',
					cancelText: '取消',
					success(res) {
						if (res.confirm) {
							that.releaseVlog()
						}
					}
				})
			},
			async releaseVlog() {
				uni.showLoading({
					mask: true
				})
				const res = await releaseVlog({
					id: this.id
				})
				if (res.code == 200) {
					this.getVlogdetail()
				}
				uni.hideLoading()
			},
			async commnetStar(item) {
				const res = await commentLike({
					id: item.id
				})
				if (res.code == 200) {
					if (item.isLike == 1) {
						item.likeVolume = item.likeVolume - 1
					} else {
						item.likeVolume = Number(item.likeVolume) + 1
					}
					item.isLike = item.isLike == 1 ? 0 : 1
				}
			},
			delCommentbtn(index, index2, level) {
				this.del_data = {
					index,
					index2,
					level
				}
				this.show_action1 = true
				console.log(this.del_data);
			},
			async delComment() {
				let id = ''
				if (this.del_data.level == 1) {
					id = this.commnetList[this.del_data.index].id
				} else {
					id = this.commnetList[this.del_data.index].children[this.del_data.index2].id
				}
				console.log(this.del_data);
				this.show_action1 = false
				const res = await commentDel({
					id: id
				})
				if (res.code == 200) {
					if (this.del_data.level == 1) {
						this.commnetList.splice(this.del_data.index, 1)
						this.detail.observeNumber = Number(this.detail.observeNumber) - 1
					} else {
						this.commnetList[this.del_data.index].children.splice(this.del_data.index2, 1)
					}
				}
			},

			//给数组对象增加一个方法，用来复制自己
			copyself(data) {
				let arr = new Array();
				for (let i in data) {
					arr[i] = data[i]
				}
				return arr;
			},

			copyData(obj) {
				// 深拷贝的时候，拷贝数组将无法实时更新试图
				let newObj = {};
				for (let key in obj) {
					if (typeof obj[key] == 'object') { //如:引用类型,那就递归
						newObj[key] = this.copyself(obj[key]);
					} else { //基本类型,直接赋值
						newObj[key] = obj[key];
					}
				}
				return newObj;
			},
			async addCommentbtn() {
				let data = {}
				if (this.reply_info.id) {
					if (this.reply_info.level == 1) {
						data = {
							vlogId: this.id,
							content: this.keyword,
							images: this.imgList.length > 0 ? this.imgList.join(',') : '',
							addr: this.addr,
							pid: this.reply_info.id,
							replyUserId: null
						}
					} else {
						data = {
							vlogId: this.id,
							content: this.keyword,
							images: this.imgList.length > 0 ? this.imgList.join(',') : '',
							addr: this.addr,
							pid: this.reply_info.p_info.id,
							replyUserId: this.reply_info.user.id,
						}
					}
				} else {
					data = {
						vlogId: this.id,
						content: this.keyword,
						images: this.imgList.length > 0 ? this.imgList.join(',') : '',
						addr: this.addr,
						pid: null,
						replyUserId: null
					}
				}
				// let obj = this.commnetList[2].children[0]
				// this.commnetList[this.reply_info.pindex].children.unshift(obj)
				// console.log(this.commnetList);
				//return false
				const res = await addComment(data)
				if (res.code == 200) {
					if (this.reply_info.id) {
						if (this.reply_info.level == 1) {
							this.reply_info.children.unshift(res.data)
						} else {
							this.commnetList[this.reply_info.pindex].children.unshift(res.data)
							//this.reply_info.p_info.children.unshift(res.data)
						}
					} else {
						let obj = res.data
						obj.open_children = false
						obj.imgsArr = obj.images ? obj.images.split(',') : []
						this.commnetList.unshift(obj)
						this.detail.observeNumber = Number(this.detail.observeNumber) + 1
					}
					this.reply_info = {}
					this.imgList = []
					this.addr = ''
					this.keyword = ''
					this.focus = false
					this.showInput = false
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f6ff;
	}

	.nav-left {
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(#fff, 0.8);
	}

	.ban-count {
		position: absolute;
		right: 50rpx;
		bottom: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
		background-color: rgba(#000, 0.5);
		padding: 0 20rpx;
		border-radius: 50rpx;
		z-index: 99;
	}

	.fix-bot {
		border-radius: 20rpx 20rpx 0 0;
	}

	.img-del {
		position: absolute;
		right: 0;
		top: 0;
	}

	.item_tag {
		width: 110rpx;
		height: 40rpx;
		font-weight: 400;
		color: #34314F;
		line-height: 40rpx;
		text-align: center;
		background-color: #ddd;
	}

	.tuangou {
		width: 688rpx;
		min-height: 335rpx;
		background: #FFFFFF;
		border-radius: 38rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
	}

	.box_bot {
		width: 381rpx;
		height: 110rpx;
		border-radius: 42rpx;
		background: #FFF6F0;
		padding: 20rpx 0;
		box-sizing: border-box;
		position: relative;

		.box_bot_right {
			// width: 100rpx;
			height: 110rpx;
			border-radius: 0 42rpx 42rpx 0;
			// background: #FF7C16;
		}
	}
</style>